<template>
  <view class="page">
    <view class="container">
      <view class="header" :style="{ paddingTop: titleHeight + 'px' }">
        <up-icon name="arrow-left" color="#ffffff" size="20" @click="goBack"></up-icon>
        <text>登录</text>
      </view>
      <view class="content">
        <p class="title">本科生实践信息发布平台</p>
        <view class="login">
          <view class="top">
            <view ref="left" :class="['box', 'left', { highlight: isLogin }]" @click="isLogin = true">
              <text>登录</text>
              <view v-show="isLogin" class="triangle1"> </view>
            </view>
            <view class="right" :class="['box', 'right', { highlight: !isLogin }]" @click="isLogin = false">
              <text>注册</text>
              <view v-show="!isLogin" class="triangle2"> </view>
            </view>
          </view>

          <view class="card">
            <view v-if="isLogin">
              <up-form ref="loginFormRef" class="form" :model="loginForm" :rules="rules">
                <up-form-item name="account" prop="account">
                  <up-input
                    v-model="loginForm.account"
                    class="input"
                    prefix-icon="account-fill"
                    placeholder="请输入账号"
                    prefix-icon-style="color : #cbcbc6"
                  >
                  </up-input>
                </up-form-item>
                <up-form-item name="password" prop="password">
                  <up-input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="lock-fill"
                    prefix-icon-style="color : #cbcbc6"
                  ></up-input>
                </up-form-item>
                <up-form-item>
                  <view class="button">
                    <up-button
                      color="#4590f1"
                      class="custom-style"
                      text="登&nbsp;&nbsp;&nbsp;录"
                      @click="handleLogin"
                    ></up-button>
                  </view>
                </up-form-item>
              </up-form>
            </view>
            <view v-else>
              <up-form ref="registerFormRef" :model="registerForm" :rules="rules" class="form">
                <up-form-item v-model="registerForm.account" name="account" prop="account">
                  <up-input
                    v-model="registerForm.account"
                    placeholder="请输入账号"
                    class="input"
                    prefix-icon="account-fill"
                    prefix-icon-style="color : #cbcbc6"
                  ></up-input>
                </up-form-item>
                <up-form-item name="password" prop="password">
                  <up-input
                    v-model="registerForm.password"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="lock-fill"
                    prefix-icon-style="color : #cbcbc6"
                  ></up-input>
                </up-form-item>
                <up-form-item name="rePassword" prop="rePassword">
                  <up-input
                    v-model="registerForm.rePassword"
                    type="password"
                    placeholder="请再次输入密码"
                    prefix-icon="lock-fill"
                    prefix-icon-style="color : #cbcbc6"
                  ></up-input>
                </up-form-item>
                <up-form-item name="name" prop="name">
                  <up-input
                    v-model="registerForm.name"
                    placeholder="请输入姓名"
                    prefix-icon="account-fill"
                    prefix-icon-style="color : #cbcbc6"
                  ></up-input>
                </up-form-item>
                <up-form-item name="stu_num" prop="stu_num">
                  <up-input
                    v-model="registerForm.stu_num"
                    placeholder="请输入学号"
                    prefix-icon="account-fill"
                    prefix-icon-style="color : #cbcbc6"
                  ></up-input>
                </up-form-item>
                <up-form-item>
                  <view class="button-bottom">
                    <up-button
                      color="#4590f1"
                      class="custom-style"
                      text="注&nbsp;&nbsp;&nbsp;册"
                      @click="handleRegister"
                    ></up-button>
                  </view>
                </up-form-item>
              </up-form>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { login, register } from '../../api/login.ts'
import { useUserStore } from '@/stores/index'
const userStore = useUserStore()
//状态栏高度
const statusBarHeight = ref(0)
//胶囊按钮高度
const capsuleHeight = ref(0)
//胶囊按钮顶部距离
const capsuleTop = ref(0)
//标题的高度
const titleHeight = ref(0)
//计算头部高度
// const headerHeight = computed(() => {
//   // 胶囊按钮底部高度,胶囊到头部的高度+胶囊高度+额外给高度放下俩个块
//   return capsuleTop.value + capsuleHeight.value + 195
// })

// 在组件挂载时获取系统信息

const systemInfo = uni.getSystemInfoSync()
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
capsuleHeight.value = menuButtonInfo.height
capsuleTop.value = menuButtonInfo.top
titleHeight.value = capsuleTop.value + 5
statusBarHeight.value = systemInfo.statusBarHeight ?? 44

// 左上角返回按钮
const goBack = () => {
  uni.navigateBack()
}
// 账号 密码
const registerForm = ref({
  account: '',
  password: '',
  rePassword: '',
  name: '',
  stu_num: null,
})

// 双向绑定
const loginForm = ref({
  account: '',
  password: '',
})

// 表单实例
const loginFormRef = ref(null)
const registerFormRef = ref(null)

// 判断是登录还是注册
const isLogin = ref(true)

const handleLogin = () => {
  loginFormRef.value.validate().then(async (valid) => {
    if (valid) {
      const res = await login(loginForm.value)
      console.log(res)
      if (res) {
        uni.setStorageSync('token', res.data.token)
        uni.setStorageSync('userInfo', res.data.info)
        userStore.setToken(res.data.token)
        userStore.setUserInfo(res.data.info)
        uni.switchTab({
          url: '/pages/homePage/index',
        })
        uni.showToast({
          title: '登录成功',
          icon: 'success',
          mask: true,
        })
      }
    } else {
      uni.$u.toast('请提交完整表单')
    }
  })
}

const handleRegister = () => {
  registerFormRef.value.validate().then(async (valid) => {
    if (valid) {
      const res = await register(registerForm.value)
      console.log(res)
      if (res) {
        uni.showToast({
          title: '注册成功',
          icon: 'success',
          mask: true,
        })
        isLogin.value = true
        // 清除表单
        registerForm.value = {
          account: '',
          password: '',
          rePassword: '',
          name: '',
          stu_num: null,
        }
      }
    } else {
      uni.$u.toast('请提交完整表单')
    }
  })
}

const rules = ref({
  account: [
    {
      type: 'string',
      required: true,
      message: '请填写账号',
      trigger: ['blur', 'change'],
    },
  ],
  password: [
    {
      type: 'string',
      required: true,
      message: '请填写密码',
      trigger: ['blur', 'change'],
    },
  ],
  rePassword: [
    {
      type: 'string',
      required: true,
      message: '请填写密码',
      trigger: ['blur', 'change'],
    },
    {
      validator: (rule, value) => value === registerForm.value.password,
      message: '两次密码不一致',
      trigger: ['blur', 'change'],
    },
  ],
  name: [
    {
      type: 'string',
      required: true,
      message: '请填写姓名',
      trigger: ['blur', 'change'],
    },
  ],
  stu_num: [
    {
      type: 'string',
      required: true,
      message: '请填写学号',
      trigger: ['blur', 'change'],
    },
  ],
})

onMounted(() => {})
</script>
<style lang="scss" scoped>
.page {
  min-height: 100vh;
  //background-color: #ffffff;
  background: linear-gradient(to bottom, #3286f5, #ffffff);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  display: flex;
  height: 450px;
  background: linear-gradient(to bottom, #3286f5, #a5c8f9);
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  padding-left: 15px;

  text {
    font-size: 16px;
    color: #ffffff;
    margin-left: 6px;
    letter-spacing: 2px;
  }
}

.content {
  display: flex;
  flex-direction: column;

  .title {
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
    color: #ffffff;
    font-family: '微软雅黑';
    text-align: center;
    letter-spacing: 2px;
  }

  .login {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;

      .left,
      .right {
        width: 50%;
        display: flex;
        flex-direction: column;
        text-align: center;
        color: #ffffff;
        font-weight: lighter;
      }

      .box {
        align-items: center;
        transition: all 0.3s;
      }

      .box.highlight {
        font-weight: 500;
      }
    }

    .triangle1 {
      width: 0;
      height: 0;
      border: 15px solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }

    .triangle2 {
      width: 0;
      height: 0;
      border: 15px solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }

    .card {
      height: 100%;
      margin: 0 15px 25px 15px;
      padding-top: 20px;
      border-radius: 10px;
      background: linear-gradient(to bottom, #fff, #eef1f3);

      :deep(.u-button.u-reset-button.data-v-461e713c) {
        width: auto !important;
        overflow: hidden;
        border-radius: 5px !important;
      }

      :deep(.data-v-aba271f3) {
        padding: 0 10px;
      }
      .form {
        margin-top: 15px;
      }

      :deep(.u-input.data-v-5904192e) {
      }

      :deep(.u-input__content) {
        width: 90% !important;
        padding-left: 20px;
        height: 50px;
        font-size: 15px;
        color: #787d7e;
        background-color: #e8f4ff;
        border-radius: 5px;
      }
    }
  }
}
</style>
